<template>
	<view :class="['main','container',$store.state.theme.themeType]"
		:style="{'--background':$store.state.theme.background,'--color1':$store.state.theme.color1,'--color2':$store.state.theme.color2}">
		<List ref='1' v-show="index==1"></List>
		<Shop ref='2' v-show="index==2"></Shop>
		<My ref='3' v-show="index==3"></My>

		<view class="tabs">
			<view :class="['item',index==1?'active':'']">
				<view class="tab" @click="change(1)">
					<text class="icon-shu iconfont"></text>
				</view>
			</view>
			<view :class="['item',index==2?'active':'']">
				<view class="tab" @click="change(2)">
					<text class="icon-faxian iconfont"></text>
				</view>
			</view>
			<view :class="['item',index==3?'active':'']">
				<view class="tab" @click="change(3)">
					<text class="icon-wowode iconfont"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import List from '../list/list.vue'
	import Shop from '../shop/shop.vue'
	import My from '../my/my.vue'

	export default {
		components: {
			List,
			My,
			Shop
		},
		data() {
			return {
				index: 1
			}
		},
		onShow() {
			//#ifdef APP
			plus.navigator.setStatusBarStyle(this.$store.state.theme.themeType == 'dark' ? 'light' : 'dark');
			//#endif
		},
		onReady() {
			//#ifdef APP
			plus.navigator.setStatusBarStyle(this.$store.state.theme.themeType == 'dark' ? 'light' : 'dark');
			//#endif
		},
		methods: {
			change(index) {
				this.index = index
			}
		}
	}
</script>

<style lang="less" scoped>
	.main {
		height: 100vh;
		overflow-y: scroll;
	}

	.tabs {
		height: 50px;
		width: 100vw;
		display: flex;
		font-size: 24rpx;
		position: absolute;
		bottom: 0;
		background: var(--background);
		box-shadow: 0rpx -10rpx 15rpx var(--color2);

		.active.item {
			.tab {
				background-color: #35a9fc !important;
				color: black;
			}
		}

		.item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;

			.tab {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-radius: 999px;
				padding: 8px 20px;
				background-color: var(--background) !important;
				box-shadow: 10rpx 10rpx 15rpx var(--color1),
					-10rpx -10rpx 15rpx var(--color2);
			}
		}
	}
</style>
